<template>
  <basePage :show-tabbar="true" :page-params="pageParams" @testAgainFn="testAgainFn">
    <navBar
      :show-back-icon="false"
      :custom-els="customEls"
    />
    <view>
      <view
        id="topWrap"
        class="h5-style"
        :style="'position: fixed;top:'+navOffsetTop+'px;z-index:999;'"
      >
        <TopTabs
          :list-data="tabList"
          key-name="name"
          :current.sync="current"
          :active-style="activeStyle"
          :inactive-style="inactiveStyle"
          @tabClick="topTabChangeFn"
        />
      </view>
      <view :style="'margin-top: '+tabsHeight+'px;padding-top: 32rpx;'">
        <Classification
          v-if="current==0"
          ref="classification"
          :swiper-height="swiperHeight"
          @setPageParamsFn="setPageParamsFn"
        />
        <Brand
          v-if="current==1"
          ref="brand"
          :swiper-height="swiperHeight"
          @resetLoadMoreFn="resetLoadMoreFn"
          @setPageParamsFn="setPageParamsFn"
        />
        <Scene
          v-if="current==2"
          ref="scene"
          :swiper-height="swiperHeight"
          @resetLoadMoreFn="resetLoadMoreFn"
          @setPageParamsFn="setPageParamsFn"
        />
        <view v-show="current != 0 && isLoadMore">
          <uni-load-more
            :status="loadStatus"
            :content-text="contentText"
            :icon-size="14"
          />
        </view>
      </view>
    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page'
import TopTabs from '@/components/top-tabs'
import navBar from '@/components/navBar'
import Classification from '@/goodsGroup/classification/index'
import Scene from '@/goodsGroup/scene/index'
import Brand from '@/goodsGroup/brand/index'
import { hideHomeBtn, tdkUrl } from '@/common/common';
export default {
  components: {
    basePage,
    TopTabs,
    navBar,
    Classification,
    Scene,
    Brand,
  },
  data() {
    return {
      title: 'GoodGroups',
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      customEls: ['search'],
      navOffsetTop: 0,
      tabsHeight: 0,
      swiperHeight: 0,
      current: 0,
      activeStyle: { width: '190rpx', textAlign: 'center' },
      inactiveStyle: { width: '190rpx', textAlign: 'center' },
      tabList: [
        {
          name: '分类',
          code: 0,
        },
        {
          name: '品牌',
          code: 1,
        },
        {
          name: '场景',
          code: 2,
        },
      ],

      page: 1,
      loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      isLoadMore: false, //是否加载中
      contentText: {
        contentdown: '加载更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多了'
      },
    }
  },
  //上拉触底函数
  onReachBottom() {
    if (!this.isLoadMore) {
      this.isLoadMore = true
      this.page += 1
      if (this.current == 1) {
        this.$refs['brand'].searchBrandPageQueryFn(this.page)
      } else if (this.current == 2) {
        this.$refs['scene'].querySceneFn(this.page)
      }
    }
  },
  onShow() {
    this.getTopHeight()
    hideHomeBtn()
  },
  methods: {
    testAgainFn() {
      if (this.current == 0) {
        this.$refs['classification'].pageInitFn()
      } else if (this.current == 1) {
        this.$refs['brand'].pageInitFn(this.page)
      } else if (this.current == 2) {
        this.$refs['scene'].querySceneFn(this.page)
      }
    },
    topTabChangeFn() {
      this.page = 1
    },
    resetLoadMoreFn(data) {
      this.loadStatus = data.loadStatus
      this.isLoadMore = data.isLoadMore
    },
    getTopHeight() {
      /*获取顶部状态栏高度*/
      let statusBarHeight = 0
      let customNavHeight = 0
      // #ifdef MP-WEIXIN || H5
      const windowHeight = this.vuex_systemInfo[1].safeArea.height
      // #endif
      // #ifdef MP-ALIPAY || MP-WEIXIN
      statusBarHeight = this.vuex_systemInfo[1].statusBarHeight
      customNavHeight = (uni.getMenuButtonBoundingClientRect().top - statusBarHeight) * 2 + uni.getMenuButtonBoundingClientRect().height;
      // #endif
      // #ifdef H5
      statusBarHeight = this.vuex_systemInfo[1].statusBarHeight
      customNavHeight = 40;
      this.tabsHeight = customNavHeight - 4
      this.swiperHeight = windowHeight - customNavHeight - 44 - 16
      // #endif
      // #ifdef MP-WEIXIN
      /*获取导航栏高度*/
      this.navOffsetTop = Number(statusBarHeight) + customNavHeight - 4
      this.tabsHeight = customNavHeight - 4
      /*滚动区高度= 窗口高度-安全区域高度-navBar高度-tab高度-底部导航高度*/
      this.swiperHeight = windowHeight - customNavHeight - 44 - 16
      // #endif
      // #ifdef MP-ALIPAY
      this.navOffsetTop = this.vuex_systemInfo[1].titleBarHeight + this.vuex_systemInfo[1].statusBarHeight - 4
      this.tabsHeight = this.vuex_systemInfo[1].titleBarHeight
      this.swiperHeight = this.vuex_systemInfo[1].windowHeight - customNavHeight - 32
      // #endif
    },
    setPageParamsFn(pageType = null, title = '', showButton = true) {
      this.$nextTick(() => {
        this.pageParams.state = pageType
        this.pageParams.emptyTitle = title
        this.pageParams.errorTitle = title
        this.pageParams.showButton = showButton
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.h5-style{
  // #ifdef H5
  margin-top: 86rpx;
  // #endif
}
.right-content{
  background: #F5F5F5;
  padding-left:32rpx;
  .class-title{}
  .class-content{
    .class-item{
      width: 138rpx;
      height: 72rpx;
      line-height: 72rpx;
      background:$uni-bg-color;
      border-radius: 8rpx;
      text-align: center;
      font-size:$uni-font-size-base;
      padding: 0 14rpx;
      float: left;
      margin:8rpx 16rpx 8rpx 0;
    }
  }
}

</style>
